<template>
    <el-dialog
    v-model="dialogVisible"
    :title="formData.id?'修改文章':'新增文章'"
    align-center
    @close="close"
  >
  <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
    size="default" @submit.prevent>
    <el-form-item label="文章标题：" prop="title" class="required">
      <el-input v-model="formData.title" type="text" clearable></el-input>
    </el-form-item>
    <el-form-item label="文章内容：" prop="articleBody" class="required">
      <quill-editor
        v-model:value="formData.articleBody"
        :options="editorOption"
        :disabled="disabled"
      />
    </el-form-item>
    <el-form-item label="视频地址：" prop="videoURL">
      <el-input v-model="formData.videoURL" type="text" clearable></el-input>
    </el-form-item>
  </el-form>
    <template #footer>
      <el-row class="dialog-footer" type="flex" justify="end">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submitForm"
          >确认</el-button
        >
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { add, update } from '@/api/hmmm/articles'
import { ElMessage } from 'element-plus'
import { toRefs, reactive, getCurrentInstance, watch, onMounted } from 'vue'
export default {
  components: {},
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    }
  },
  setup (props, { emit }) {
    // 数据回显

    // 关闭弹窗
    function close () {
      emit('close')
    }
    // 提交
    const instance = getCurrentInstance()
    const submitForm = () => {
      instance.ctx.$refs.vForm.validate(async valid => {
        if (!valid) return
        if (state.formData.id) {
          await update(state.formData)
        } else {
          await add(state.formData)
        }
        ElMessage({
          message: '操作成功',
          type: 'success'
        })
        // TODO: 提交表单
        emit('getList')
        emit('close')
      })
    }
    const resetForm = () => {
      instance.ctx.$refs.vForm.resetFields()
    }
    // 富文本
    const state = reactive({
      disabled: false,
      content: '2333',
      editorOption: {
        placeholder: 'core',
        _content: ''
      },
      formData: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [{
          required: true,
          message: '字段值不可为空'
        }],
        articleBody: [{
          required: true,
          message: '字段值不可为空'
        }]
      }
    })
    return {
      ...toRefs(state),
      submitForm,
      close,
      resetForm
    }
  }
}

</script>

<style lang="scss">
  .el-input-number.full-width-input,
  .el-cascader.full-width-input {
    width: 100% !important;
  }

  .el-form-item--medium {
    .el-radio {
      line-height: 36px !important;
    }

    .el-rate {
      margin-top: 8px;
    }
  }

  .el-form-item--small {
    .el-radio {
      line-height: 32px !important;
    }

    .el-rate {
      margin-top: 6px;
    }
  }

  .el-form-item--mini {
    .el-radio {
      line-height: 28px !important;
    }

    .el-rate {
      margin-top: 4px;
    }
  }

  .clear-fix:before,
  .clear-fix:after {
    display: table;
    content: "";
  }

  .clear-fix:after {
    clear: both;
  }

  .float-right {
    float: right;
  }

</style>

<style lang="scss" scoped>
  div.table-container {
    table.table-layout {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;

      td.table-cell {
        display: table-cell;
        height: 36px;
        border: 1px solid #e1e2e3;
      }
    }
  }

  div.tab-container {}

  .label-left-align :deep(.el-form-item__label) {
    text-align: left;
  }

  .label-center-align :deep(.el-form-item__label) {
    text-align: center;
  }

  .label-right-align :deep(.el-form-item__label) {
    text-align: right;
  }

  .custom-label {}

  .static-content-item {
    min-height: 20px;
    display: flex;
    align-items: center;

    :deep(.el-divider--horizontal) {
      margin: 0;
    }
  }
  .ql-container {
    width: 100%;
    height: 200px;
  }
</style>
